<!-- 老板 – 我的 – 会员增长率		growth -->
<template>
	<view class="wraps">
		<view class="">
			<!-- 柱状图 -->
			<view class="infor_zhuzhuang1">
				<u-picker mode="time" v-model="showsc" @confirm="tom"></u-picker>
				<view class="infor_zhuzhuang1_p">
					<p style="float: left;">成交率(%)</p>
					<view style="float: right;" @click="showsc = !showsc;" v-model="arr" class="hui">
						<text>{{arr}}</text>
					</view>
				</view>
				<view style="height: 20rpx;"></view>
				<view>
					<histogram-chart :dataAs="histogramData2" ref="histogramData1" canvasId="ht1" labelKey="label"
						valueKey="value" :yAxisAs="{
								formatter: {
									type: 'percent' //type:number percent String,额外参数:fixed:NUmber,name:String
								}
							}" />
				</view>
				<!-- <view class="mt40">
					<view class="flexR aic jcsa he w100 mlr30 mt30">
						<select id="ym" @change="chooseYm">
							<option value="1">月份</option>
							<option value="2">年份</option>
						</select>
						<view class="" style="width: 3rpx;height: 60rpx;background-color: #FFFFFF;"></view>
						<view class="" v-if="ym==1">本月(人)</view>
						<text class="" v-if="ym==2">今年(人)</text>
						<view class="" style="width: 3rpx;height: 60rpx;background-color: #FFFFFF;"></view>
						<text class="" v-if="ym==1">去月(人)</text>
						<text class="" v-if="ym==2">去年(人)</text>
						<view class="" style="width: 3rpx;height: 60rpx;background-color: #FFFFFF;"></view>
						<view class="">增长率</view>
					</view>
					<view class="" v-if="ym==1" v-for="(item,index) in 6" :key="index">
						<view class="mlr30 w100 he1 flexR jcsa">
							<view class="">4月</view>
							<view class="">1400</view>
							<view class="">1200</view>
							<view class="">16.7%</view>
						</view>
					</view>
					<view class="" v-if="ym==2" v-for="(item,index) in 6" :key="index">
						<view class="mlr30 w100 he1 flexR jcsa">
							<view class="">2020年</view>
							<view class="">1400</view>
							<view class="">1200</view>
							<view class="">16.7%</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
	export default {
		components: {
			HistogramChart
		},
		data() {
			return {
				ym:1,
				showsc: false,
				arr: '选择日期',
				histogramData2: {
					//柱状图Compent  //label应为series value 应为
					label: ['2052', '2013', '2014', '2015', '2016', '2017', '2018'],
					value: [{
						name: '',
						data: [0.3, 0.5, 0.5, 0.4, 0.3, 0.1, 0.2]
					}]
				},
			}
		},
		methods: {
			chooseYm(e) {
				let value = document.getElementById('ym').value
				console.log(value)
				this.ym=value

			}
		}
	}
</script>

<style scoped>
	.he1 {
		height: 60rpx;
		background-color: #ffffff;
	}

	.he {
		height: 60rpx;
		background-color: #bfdbf1;
	}

	.warps {
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
	}

	/* 曲线图 */
	.infor_zhuzhuang1 {
		width: 90vw;
		height: 400rpx;
	}

	.infor_zhuzhuang1_p {
		width: 100%;
		height: 28rpx;
		padding: 20rpx;
		font-size: 24rpx;
	}

	.infor_zhuzhuang1_shijian>text {
		font-size: 20rpx;
		color: #ffffff;
	}
</style>
